<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>人机大战之成语接龙</title>
<style>
h1{
    color: red;
}
input{
    padding: 8px;
    border-radius: 6px;
}
.history{
	min-height: 200px;
    border: 1px solid gray;
    border-radius: 8px;
    padding: 10px;
}
form >div:nth-child(2){
    display: flex;
    gap: 10px;
}
.msg{
    color: red;
    font-weight: bold;/* 字体加粗 */
    margin: 10px 0;
}
</style>
</head>
<body><%
request.setCharacterEncoding("utf-8");
String cy=request.getParameter("cy"); //获取用户输入的成语
String history=request.getParameter("history"); //获取接龙历史
if (history==null)history="";
//out.print(cy+"\t"+history);
String msg="";
String first="";
boolean isWin=false; //人赢了吗？
if(cy!=null){ //提交有数据，需要处理用户输入的数据
	cy=cy.trim();//删除输入成语两端的空白
	Class.forName("com.mysql.cj.jdbc.Driver");
	try(Connection cn= DriverManager.getConnection("jdbc:mysql://localhost:3306/db","root","12qwas");
		PreparedStatement ps=cn.prepareStatement("select * from chengyu where cy=?")
	) {
		ps.setString(1, cy);
		try (ResultSet rs = ps.executeQuery()) { //Ctrl+Alt+V
			if (rs.next()) { //用户输入的是成语
				history += "," + cy;//用户输入的成语放到接龙历史中
				first = cy.substring(cy.length() - 1); //计算机接龙的首字
                 //该计算机接龙了
			} else { //用户输入的不是成语
				msg = "Sorry,你输入的“" + cy + "”不是成语~";
				first=cy.substring(0,1); //用户下次输入时成语的首字
			}
		}
	}
	if (msg.isEmpty()) { //该计算机接龙了
		try(Connection cn= DriverManager.getConnection("jdbc:mysql://localhost:3306/db","root","12qwas");
			PreparedStatement ps=cn.prepareStatement("select cy from chengyu where first=? order by rand() limit 1")
		) {
			ps.setString(1, first); //计算机接龙的首字
			try (ResultSet rs = ps.executeQuery()) { //Ctrl+Alt+V
				if (rs.next()) { //计算机接龙成功
					cy=rs.getString("cy"); //计算机接龙的成语
					history += "," + cy;//用户输入的成语放到接龙历史中
					first = cy.substring(cy.length() - 1); //人接龙的首字
					//该计算机接龙了
				} else { //计算机接龙失败，人赢啦
					msg = "恭喜你在成语接龙游戏中战胜了计算机~";
					isWin=true;
				}
			}
		}
	}
}
%>
<div class='kuang'>
	<h1>人机大战之成语接龙</h1>
	<div class='history'>
<%
String[] cys=history.split(",");
//out.print(Arrays.toString(cys));
for(int i=1; i<cys.length;++i){
	out.println("\t\t<p>"+i+". ["+(i%2==0?"机":"人")+"] "+cys[i]+"</p>");
}
%>
	</div>
	<form method="post" action="">
		<div class='msg'><%=msg%></div>
		<div>
			<input type='text' name='cy'<%=isWin?" disabled":""%> />
			<input type="submit" value='提交' onclick='return check()'<%=isWin?"disabled":""%> />
			<input type="button" value='重新开始' onclick='again()'/>
			<input type='hidden' name='history' value='<%=history%>' />
		</div>
	</form>
</div>
<script>
const $=function(selector){
	return document.querySelector(selector)
}
function again(){ //重新开始
	location.href=""
}
function check(){ //对用户输入的成语进行规则校验
	//函数返回true，表单会提交，若返回false，就不会提交
	let first='<%=first%>' //用户接龙成语的首字
	let cy=$('input[name=cy]').value.trim() //获取用户输入的成语,清除两端的空白
// 	if(cy.length<3||cy.length>14){ //成语长度不正确
// 		$('.msg').innerText='成语的长度应该有3~14汉字~'
// 		return false
// 	}
// 	if(!cy.startWith(first)){
// 		$('.msg').innerText='输入的成语必须以“关”字开头~'
// 			return false
// 	}
	try{
		if(cy.length<3||cy.length>14) throw new Error('成语的长度应该有3~14汉字~') //抛出异常后会转移到catch块去执行，try块后续的代码不会在执行
		if(!cy.startsWith(first)) throw new Error('输入的成语必须以“<%=first%>”字开头~') //try块若没有异常，catch块也不会执行
		return true
	}catch(e){
		$('.msg').innerText=e.message //将错误信息显示在界面上
		return false //不再提交表单
	}
}
</script>
</body>
</html>
